﻿@page "/components/slider"

<DocsPage>
    <DocsPageHeader Title="Slider" SubTitle="A slider is a visual representation and action to let the user select from a range of values." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Sliders">
                <Description>Lets you select a value along the whole range.</Description>
            </SectionHeader>
            <SectionContent Code="SliderBasicExample">
                <SliderBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Step Sliders">
                <Description>You can choose the increment with the <CodeInline>Step</CodeInline> prop.</Description>
            </SectionHeader>
            <SectionContent Code="SliderStepsExample">
                <SliderStepsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Minimum and Maximum Values">
                <Description>With the <CodeInline>Min</CodeInline> and <CodeInline>Max</CodeInline> properties, you can set the minimum and maximum allowed value.</Description>
            </SectionHeader>
            <SectionContent Code="SliderMinMaxExample">
                <SliderMinMaxExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
